<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽功能</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .hh {
            display: flex;
        }

        #a {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
        }

        #b {
            width: 200px;
            height: 300px;
            margin-left: 30px;
            border: 1px solid aquamarine;
        }

        #a div {
            width: 100px;
            height: 40px;
            margin: 0 auto;
            border: 1px solid red;
        }

        #b div {
            width: 100px;
            height: 40px;
            margin: 0 auto;
            border: 1px solid red;
        }

    </style>
</head>
<body>
<input id="inp" type="text" placeholder="名字">
<button id="btn" onclick="btn()">添加</button>
<div class="hh">
    <div id="a">
        <div id="a1" draggable="true">朱雀</div>
        <div id="a2" draggable="true">玄武</div>
        <div id="a3" draggable="true">白虎</div>
        <div id="a4" draggable="true">青龙</div>
        <div id="a5" draggable="true">主角</div>
    </div>
    <div id="b" draggable="true">

    </div>
</div>
<script>
    var a = document.querySelector("#a");
    a.ondragstart = function (event) {
        event.dataTransfer.setData("id", event.target.id);
    }

    var b = document.querySelector("#b");
    b.ondragover = function (ev) {
        ev.preventDefault();
    }
    b.ondrop = function (ev) {
        var id = ev.dataTransfer.getData("id");
        var idDom = document.getElementById(id);
        this.appendChild(idDom);
    }
    //---------------------------------------------------------
    b.ondragstart = function (event) {
        event.dataTransfer.setData("id", event.target.id);
    }
    a.ondragover = function (ev) {
        ev.preventDefault();
    }
    a.ondragover = function (ev) {
        ev.preventDefault();
    }
    a.ondrop = function (ev) {
        var id = ev.dataTransfer.getData("id");
        var idDom = document.getElementById(id);
        this.appendChild(idDom);
    }
    //--------------------添加功能-----------------------------------

    //var btn=document.getElementById("btn");
    var count = 5;
    var ids = "";

    function btn() {
        count++;
        ids = "a" + count;
        var inp = document.getElementById("inp").value;
        $("#a").append("<div draggable='true' id='" + ids + "'>" + inp + "</div>");
    }


</script>
</body>
</html>